<template>
	<view class="u-wrap">
		<!--出租日期-->
		<view class="u-search-box">
			<view class="u-search-inner" @click="calenderShow">
				<span class="u-search-text">{{ startDate }} - {{ endDate }}</span>
				<u-icon name="edit-pen" color="#909399" :size="28"></u-icon>
			</view>
			<u-calendar
				v-model="show"
				ref="calendar"
				@change="calenderChange"
				:mode="mode"
				:start-text="startText"
				:end-text="endText"
				:range-color="rangeColor"
				:range-bg-color="rangeBgColor"
				:active-bg-color="activeBgColor"
				:btn-type="btnType"
				max-date="2099-01-01"
				:min-date="today"
			></u-calendar>
		</view>

		<!--下拉筛选-->
		<view class="u-m-p-50">
			<view class="u-demo-area u-flex u-row-center">
				<u-dropdown :close-on-click-mask="mask" ref="uDropdown" :activeColor="activeColor" :borderBottom="borderBottom">
					<u-dropdown-item @change="change" v-model="value1" title="综合排序" :options="options1"></u-dropdown-item>
					<u-dropdown-item @change="change" v-model="value2" title="品牌" :options="options2"></u-dropdown-item>
					<u-dropdown-item title="价格范围">
						<view class="slot-content">
							<view class="slider-warp">
								<u-slider v-model="movingPrice" @moving="getMovingPrice" @end="getMaxPrice"></u-slider>
							</view>
							<view class="price-line">
								价格范围：
								<span v-if="movingPrice===100">不限</span>
								<span v-else-if="movingPrice===0">不限</span>
								<span v-else>0 - {{maxPrice}}</span>
							</view>
							<u-button type="primary" @click="closeDropdown">确定</u-button>
						</view>
					</u-dropdown-item>
				</u-dropdown>
			</view>
		</view>
		<!--车辆列表-->
		<view class="u-menu-wrap">
			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
				<view
					v-for="(item, index) in tabbar"
					:key="index"
					class="u-tab-item"
					:class="[current == index ? 'u-tab-item-active' : '']"
					:data-current="index"
					@tap.stop="swichMenu(index)"
				>
					<text class="u-line-1">{{ item.name }}</text>
				</view>
			</scroll-view>
			<block v-for="(item, index) in tabbar" :key="index">
				<scroll-view scroll-y class="right-box" v-if="current == index" @scrolltolower="reachBottom">
					<view class="page-view">
						<view class="class-item">
							<view class="item-title">
								<span>{{ item.name }}</span>
							</view>
							<view class="item-container">
								<view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1">
									<image class="item-menu-image" :src="item1.icon" mode=""></image>
									<view class="item-menu-name">{{ item1.name }}</view>
								</view>
								<view class="item" v-for="(item1, index1) in item.goodsList" :key="item1.id" @click="goCarDetailPage(item1.id)">
									<view class="left"><image :src="item1.goodsUrl" mode="aspectFill"></image></view>
									<view class="content">
										<view class="title u-line-2">{{ item1.title }}</view>
										<view class="flag"><span>{{ item1.flag }}</span></view>
										<view class="type">{{ item1.type }}</view>
										<view class="price">
											￥{{ priceInt(item1.price) }}
											<text class="decimal">.{{ priceDecimal(item1.price) }}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</block>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabbar: [
				{
					name: '所有类型',
					goodsList: []
				},
				{
					name: '经济型',
					goodsList: []
				},
				{
					name: '舒适型',
					goodsList: []
				},
				{
					name: '精英型',
					goodsList: []
				}
			],
			scrollTop: 0, //tab标题的滚动条位置
			current: 0, // 预设当前项的值
			menuHeight: 0, // 左边菜单的高度
			menuItemHeight: 0, // 左边菜单item的高度
			value1: 0,
			value2: 0,
			mask: true,
			options1: [
				{
					label: '默认排序',
					value: 0
				},
				{
					label: '价格从低到高',
					value: 1
				},
				{
					label: '价格从高到底',
					value: 2
				}
			],
			options2: [

			],
			movingPrice:0,
			maxPrice:0,
			list: [
				{
					label: '不限',
					active: true
				},
				{
					label: '0-150',
					active: false
				},
				{
					label: '250-250',
					active: false
				},
				{
					label: '250-350',
					active: false
				},
				{
					label: '350以上',
					active: false
				}
			],
			borderBottom: false,
			activeColor: '#2979ff',
			params: {},
			show: false,
			mode: 'range',
			result: '请选择日期',
			startText: '出租',
			endText: '归还',
			rangeColor: '#3590eb',
			rangeBgColor: 'rgba(89,219,255,0.13)',
			activeBgColor: '#3590eb',
			btnType: 'primary',
			interval: 0,
			startDate: '',
			endDate: '',
			today: '',
			page:1,
			totalPage:0
		};
	},

	computed: {
		// 价格小数
		priceDecimal() {
			return val => {
				if (val !== parseInt(val)){
					val = val.toString();
					return val.substring(val.length-2);
				}else{ return '00';}
			};
		},
		// 价格整数
		priceInt() {
			return val => {
				if (val !== parseInt(val)){
					return parseInt(val);
				}else{
					return val;
				}
			};
		}
	},
	onLoad(option) {
		// 页面加载的时候
		// 获取传过来的参数
		this.startDate = option.startDate;
		this.endDate = option.endDate;
		this.interval = option.interval;
		// 计算出今天是哪天
		let myDate = new Date();
		this.today = myDate
				.toLocaleDateString()
				.split('/')
				.join('-');
		// 请求接口得到分类
		this.$u.api.getCarCategory().then(res=>{
			let cate = JSON.parse(JSON.stringify(res.data));
			this.options2 = cate;
		})

		// 根据开始和结束时间，请求接口搜索出车辆列表
		this.getCarList();
	},
	methods: {
		// 得到车辆列表
		getCarList(){
			let postData = {
				'startDate':this.startDate,
				'endDate':this.endDate,
				'priceType':this.current,
				'orderType':this.value1,
				'categoryId':this.value2,
				'maxPrice':this.maxPrice,
				'page':this.page
			};
			this.$u.api.carList(postData).then(res=>{
				// this.tabbar[this.current].goodsList = res.data.items;
				res.data.items.forEach((item)=>{
					this.tabbar[this.current].goodsList.push(item)
				})

				this.totalPage = res.data.totalPage
			})
		},
		reachBottom(){
			// 页面触底
			if(this.page < this.totalPage){
				// 页码加1
				this.page++;
				this.getCarList()
			}
		},
		getImg() {
			return Math.floor(Math.random() * 35);
		},
		// 点击左边的栏目切换
		async swichMenu(index) {
			if (index == this.current) return;
			this.current = index;
			// 如果为0，意味着尚未初始化
			if (this.menuHeight == 0 || this.menuItemHeight == 0) {
				await this.getElRect('menu-scroll-view', 'menuHeight');
				await this.getElRect('u-tab-item', 'menuItemHeight');
			}
			// 将菜单菜单活动item垂直居中
			this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
			this.page = 1;
			this.tabbar[this.current].goodsList = [];
			this.getCarList();
		},
		// 获取一个目标元素的高度
		getElRect(elClass, dataVal) {
			new Promise((resolve, reject) => {
				const query = uni.createSelectorQuery().in(this);
				query
					.select('.' + elClass)
					.fields({ size: true }, res => {
						// 如果节点尚未生成，res值为null，循环调用执行
						if (!res) {
							setTimeout(() => {
								this.getElRect(elClass);
							}, 10);
							return;
						}
						this[dataVal] = res.height;
					})
					.exec();
			});
		},
		// 筛选框相关
		borderChange(index) {
			this.borderBottom = !index;
		},
		activeColorChange(index) {
			this.activeColor = ['#2979ff', '#ff9900', '#19be6b'][index];
		},
		change(index) {
			// this.$u.toast(`点击了排序的第${index}项`);
			this.page = 1;
			this.tabbar[this.current].goodsList = [];
			this.getCarList();
		},
		closeDropdown() {
			this.$refs.uDropdown.close();
			this.page = 1;
			this.tabbar[this.current].goodsList = [];
			this.getCarList()
		},
		tagClick(index) {
			this.list[index].active = !this.list[index].active;
			this.list.forEach((obj, i) => {
				if (i != index) {
					this.list[i].active = false;
				}
			});
		},
		maskChange(index) {
			this.mask = !index;
		},
		calenderShow() {
			this.show = true;
		},
		calenderChange(e) {
			this.startDate = e.startDate;
			this.endDate = e.endDate;
			// 计算出天数
			let interval = new Date(e.endDate) - new Date(e.startDate);
			let days = Math.floor(interval / (24 * 3600 * 1000));
			this.interval = days;
			this.page = 1;
			this.tabbar[this.current].goodsList = [];
			this.getCarList()
		},
		goCarDetailPage(carId) {
			this.$u.route({
				url: 'pages/rentalCars/carDetail/index',
				params: { carId: carId, startDate: this.startDate, endDate: this.endDate, interval: this.interval }
			});
		},
		// 移动滑块停止后得到的价格最大值
		getMaxPrice(){
			this.maxPrice = this.movingPrice * 3;
		},
		// 滑块移动中的值
		getMovingPrice(){
			this.maxPrice = this.movingPrice * 3;
		}

	}
};
</script>

<style lang="scss" scoped>
.u-wrap {
	height: calc(100vh);
	/* #ifdef H5 */
	height: calc(100vh - var(--window-top));
	/* #endif */
	display: flex;
	flex-direction: column;
}

.u-search-box {
	padding: 18rpx 30rpx;
}

.u-menu-wrap {
	flex: 1;
	display: flex;
	overflow: hidden;
}

.u-search-inner {
	background-color: rgb(234, 234, 234);
	border-radius: 15rpx;
	padding: 10rpx 16rpx;
	text-align: center;
}

.u-search-text {
	font-size: 26rpx;
	color: $u-tips-color;
	margin: 0 20rpx;
}

.u-tab-view {
	width: 200rpx;
	height: 100%;
}

.u-tab-item {
	height: 110rpx;
	background: #f6f6f6;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26rpx;
	color: #444;
	font-weight: 400;
	line-height: 1;
}

.u-tab-item-active {
	position: relative;
	color: #000;
	font-size: 30rpx;
	font-weight: 600;
	background: #fff;
}

.u-tab-item-active::before {
	content: '';
	position: absolute;
	border-left: 4px solid $u-type-primary;
	height: 32rpx;
	left: 0;
	top: 39rpx;
}

.u-tab-view {
	height: 100%;
}

.right-box {
	background-color: rgb(250, 250, 250);
}

.page-view {
	padding: 16rpx;
}

.class-item {
	margin-bottom: 30rpx;
	background-color: #fff;
	padding: 16rpx;
	border-radius: 8rpx;
}

.item-title {
	font-size: 26rpx;
	color: $u-main-color;
	font-weight: bold;
}

.item-menu-name {
	font-weight: normal;
	font-size: 24rpx;
	color: $u-main-color;
}

.item-container {
	display: flex;
	flex-wrap: wrap;
}

.thumb-box {
	width: 33.333333%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin-top: 20rpx;
}

.item-menu-image {
	width: 120rpx;
	height: 120rpx;
}

.u-config-wrap {
	padding: 40rpx;
}

.slot-content {
	background-color: #ffffff;
	padding: 24rpx;
	.slider-warp{
		padding: 30rpx;
		.badge-button {
			padding: 4rpx 6rpx;
			background-color: $u-type-error;
			color: #fff;
			border-radius: 10rpx;
			font-size: 22rpx;
			line-height: 1;
		}
	}
	.price-line{
		margin-bottom: 20rpx;
	}

	.item-box {
		margin-bottom: 50rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.item {
			border: 1px solid $u-type-primary;
			color: $u-type-primary;
			padding: 8rpx 40rpx;
			border-radius: 100rpx;
			margin-top: 30rpx;
		}

		.active {
			color: #ffffff;
			background-color: $u-type-primary;
		}
	}
}
.item {
	display: flex;
	margin: 20rpx 0 0;

	.left {
		margin-right: 20rpx;

		image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 10rpx;
		}
	}

	.content {
		.title {
			font-size: 28rpx;
			line-height: 50rpx;
		}

		.type {
			margin: 10rpx 0;
			font-size: 24rpx;
			color: $u-tips-color;
		}
		.flag {
			margin: 10rpx 0;
			font-size: 24rpx;
			color: #fff5f4;
			background-color: #ff9543;
			padding: 6rpx 15rpx;
			width: 130rpx;
			text-align: center;
		}

		.price {
			color: #ff0000;
			font-size: 24rpx;
		}
	}

	.right {
		margin-left: 10rpx;
		padding-top: 20rpx;
		text-align: right;

		.decimal {
			font-size: 24rpx;
			margin-top: 4rpx;
		}

		.number {
			color: $u-tips-color;
			font-size: 24rpx;
		}
	}
}
</style>
